<template>
  <el-upload class="avatar-uploader !border-0" list-type="picture-card" :headers="headers" :action="uploadUrl"
    :show-file-list="false" :on-success="handleAvatarSuccess" accept="image/*">
    <div class="w-full h-full" v-if="!isBtn">
      <img class="w-full h-full" v-if="!!imageUrl" :src="imageUrl" />
      <Picture class="color-#e1e1e1" v-else />
    </div>
    <el-button v-else type="primary">上传图片</el-button>
    <template #tip>
      <div class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </template>
  </el-upload>
</template>
<script setup lang="ts">
import { getToken } from '@/utils/auth'
import { Picture } from '@element-plus/icons-vue'
const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/common/upload'
const emit = defineEmits(['uploadSuccess'])
const headers = ref({ Authorization: "Bearer " + getToken() })
const imageUrl = defineModel<string>()
const props = defineProps({
  backImgPath: {
    type: String,
    default: ''
  },
  isBtn: {
    type: Boolean,
    default: false
  }
})
function handleAvatarSuccess(e) {
  ElMessage.success('上传成功')
  imageUrl.value = e.url
  emit("uploadSuccess", e.url)
}

</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  height: 100%;
  border: 0 !important;
}
</style>
